<template>
   <fieldset>
     <legend>购物车</legend>
     <ul>
      <li v-for="item of cartData" :key=item.id>
           名称:{{item.title}}---价格:{{item.price}}---数量:{{item.count}}----产品id{{item.id}}---<button @click="handleClick(item)">减少</button>
      </li>
     </ul>
     <h1>总价格:{{total}}</h1>
   </fieldset>
</template>

<script>
//辅助函数mapActions,mapGetters,mapMutation
import { mapState ,mapGetters,mapActions} from 'vuex';
export default {
  computed:{
    ...mapState("cart",["cartData"]),
    ...mapGetters("cart",["total"])
  },
  methods:{
    handleClick(t){
        //触发car模块的action
        this.REMOVE_CARTS(t);
    },
    ...mapActions('cart',["REMOVE_CARTS"])
  }
}
</script>

<style>

</style>